<template>
	<div class="category-container">
		<el-radio-group v-model="platType" style="margin-top: 10px" @change="getData">
			<el-radio-button label="0">支付宝小程序</el-radio-button>
			<el-radio-button label="1">微信小程序</el-radio-button>
		</el-radio-group>
		<el-divider />

		<el-form class="el_form" style="display: flex; justify-content: flex-start; margin-bottom: 10px">
			<el-button type="primary" @click="openAdd" v-if="platType == 0">添加支付宝协议</el-button>
			<el-button type="primary" @click="openAdd" v-if="platType == 1">添加微信协议</el-button>
		</el-form>

		<table-components :tableLoading="tableLoading" :tableData="tableData" @currentChange="currentChange">
			<el-table-column prop="name" label="协议名称" align="center" />
			<el-table-column prop="version" label="版本号" align="center" />
			<el-table-column label="协议状态" align="center">
				<template v-slot="scope">
					<el-tag type="primary" v-if="scope.row.status == 1">启用</el-tag>
					<el-tag type="danger" v-if="scope.row.status == 0">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createBy" label="创建人" align="center" />
			<el-table-column prop="createTime" label="创建时间" align="center" />
			<el-table-column label="操作" align="center" width="200">
				<template v-slot="scope">
					<el-button type="text" @click="openEdit(scope.row)">查看</el-button>

					<el-button type="text" @click="doAgreementStatusFn(scope.row)" v-if="scope.row.status == 0">启用</el-button>
					<el-button type="text" @click="doAgreementStatusFn(scope.row)" v-if="scope.row.status == 1">禁用</el-button>
				</template>
			</el-table-column>
		</table-components>

		<addDialog
			:isAdd="isAdd"
			:dialogVisible="addVisible"
			:row="clickItem"
			@handleClose="addClose"
			:dataType="props.dataType"
			:platType="platType"
			:role="props.role"
		></addDialog>
	</div>
</template>

<script setup lang="ts" name="role">
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { NextLoading } from '/@/utils/loading';
import TableComponents from '/@/components/tableComponents/index.vue';
import { getAgreement, doAgreementStatus, getSiteAgreement, doSiteTemplateStatus } from '/@/api/api';
import addDialog from './dialog/addDialog.vue';

const tableData = reactive({
	data: [],
	total: 0,
	page: 1,
	size: 20,
});
const tableLoading = ref(true);
const queryFrom = ref({});
const addVisible = ref(false);
const clickItem = ref({});
const platType = ref(0);
const isAdd = ref(true);

const props = defineProps({
	dataType: {
		type: Number,
		default: () => 0,
	},
	role: {
		type: String,
		default: () => '',
	},
});

// 页面加载时
onMounted(() => {
	NextLoading.done();
	getData();
});

async function doAgreementStatusFn(item) {
	tableLoading.value = true;

	if (props.role == 'admin') {
		let { code, data } = await doAgreementStatus({
			id: item.id,
			status: item.status == 0 ? 1 : 0,
		});
		if (code == 200) {
			tableLoading.value = false;
			getData();
		}
	} else {
		let { code, data } = await doSiteTemplateStatus({
			id: item.id,
			status: item.status == 0 ? 1 : 0,
		});
		if (code == 200) {
			tableLoading.value = false;
			getData();
		}
	}
}

async function getData() {
	tableLoading.value = true;
	let par = {
		page: tableData.page,
		size: tableData.size,
		dataType: props.dataType, //0：用户协议；1：隐私政策
		platType: platType.value,
		...queryFrom.value,
	};

	if (props.role == 'admin') {
		let { code, data } = await getAgreement(par);
		if (code == 200) {
			tableData.data = data.list;
			tableData.total = data.total;
			tableLoading.value = false;
		}
	} else {
		let { code, data } = await getSiteAgreement(par);
		if (code == 200) {
			tableData.data = data.list;
			console.log('🚀 ~ getData ~ tableData.data:', tableData.data);
			tableData.total = data.total;
			tableLoading.value = false;
		}
	}
}

function openAdd(item) {
	isAdd.value = true;
	clickItem.value = item;
	addVisible.value = true;
}

function addClose() {
	addVisible.value = false;
	getData();
}

function openEdit(item: any) {
	isAdd.value = false;
	clickItem.value = item;
	addVisible.value = true;
}
</script>

<style scoped lang="scss">
@import url('/@/theme/page/page.scss');
.category-container {
	padding: 0 20px 20px 20px;
}
</style>
